<template>
	<view class="storeDetail">

		<!-- <view class="cu-bar bg-white"> -->
		<swiper class="card-swiper square-dot" :indicator-dots="true" :circular="true" :autoplay="true" interval="5000"
			duration="500"  indicator-color="#8799a3" indicator-active-color="#F8D347">
			<swiper-item v-for="(item,index) in info.banner" :key="index" :class="cardCur==index?'cur':''">
				<view class="swiper-item" @click="topBannerClick(item)">
					
					<image :src="img+item" mode="aspectFill"></image>
					<view style="position: absolute;top: 0;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;
					;z-index: 99999;">
						<image  src="../../static/play.png" style="z-index: 99999;;width: 5rem;height: 5rem;" v-if="item.isvideo"></image>
					</view>
					
				</view>
			</swiper-item>
		</swiper>
		<!-- </view> -->
		<view class="cu-bar bg-white margin-top">
			<view class="action">
				<text class="cuIcon-titles text-green"></text>
				<text class="text-xl text-bold">{{info.name}}</text>
			</view>
		</view>
		<view class="cu-list menu sm-border card-menu margin-top">

			<!-- <view class="cu-item" >
				<view class="content">
					<text class="cuIcon-sort text-grey"></text>
					<text class="text-grey">标题</text>
				</view>
				<view class="action">
					<text class="text-grey text-sm">{{info.需求标题}}</text>
				</view>
			</view> -->
			<view class="cu-item">
				<view class="content">
					<text class="cuIcon-choicenessfill text-grey"></text>
					<text class="text-grey">价格</text>
				</view>
				<view class="action">
					<text class="text-price text-red text-lg">{{info.price}}</text>
				</view>
			</view>

			<!-- <view class="cu-item" >
				<view class="content">
					<text class="cuIcon-sort text-grey"></text>
					<text class="text-grey">昵称</text>
				</view>
				<view class="action">
					<text class="text-grey text-sm">{{info.姓名}}</text>
				</view>
			</view> -->
			
			<view class="cu-item">
				<view class="content">
					<text class="cuIcon-sort text-grey"></text>
					<text class="text-grey">发布时间</text>
				</view>
				<view class="action">
					<text class="text-grey text-sm">{{info.created_at}}</text>
				</view>
			</view>
			<view class="cu-item">
				<view class="content">
					<text class="cuIcon-circlefill text-grey"></text>
					<text class="text-grey">房屋类型</text>
				</view>
				<view class="action">
					<text class="text-grey text-sm">{{info.types.name}}</text>
				</view>
			</view>
			
			<view class="cu-item">
				<view class="content">
					<text class="cuIcon-circlefill text-grey"></text>
					<text class="text-grey">建筑面积</text>
				</view>
				<view class="action">
					<text class="text-grey text-sm">{{info.area}}</text>
				</view>
			</view>
			<view class="cu-item">
				<view class="content">
					<text class="cuIcon-circlefill text-grey"></text>
					<text class="text-grey">楼栋</text>
				</view>
				<view class="action">
					<text class="text-grey text-sm">{{info.projects.name}}</text>
				</view>
			</view>
			
			<view class="cu-item">
				<view class="content">
					<text class="cuIcon-circlefill text-grey"></text>
					<text class="text-grey">户型分部</text>
				</view>
				<view class="action">
					<text class="text-grey text-sm">{{info.fenbu}}</text>
				</view>
			</view>
			
			<view class="cu-item">
				<view class="content">
					<text class="cuIcon-circlefill text-grey"></text>
					<text class="text-grey">户型解析</text>
				</view>
				<view class="action">
					<text class="text-grey text-sm">{{info.explain}}</text>
				</view>
			</view>
			
			<view class="cu-item">
				<view class="content">
					<text class="cuIcon-circlefill text-grey"></text>
					<text class="text-grey">物业类别</text>
				</view>
				<view class="action">
					<text class="text-grey text-sm">{{info.wy_type}}</text>
				</view>
			</view>
			
			<view class="cu-item">
				<view class="content">
					<text class="cuIcon-circlefill text-grey"></text>
					<text class="text-grey">项目特色</text>
				</view>
				<view class="action">
					<text class="text-grey text-sm">{{info.characteristic}}</text>
				</view>
			</view>
			
			<view class="cu-item">
				<view class="content">
					<text class="cuIcon-circlefill text-grey"></text>
					<text class="text-grey">建筑类别</text>
				</view>
				<view class="action">
					<text class="text-grey text-sm">{{info.jz_type}}</text>
				</view>
			</view>
			
			<view class="cu-item">
				<view class="content">
					<text class="cuIcon-circlefill text-grey"></text>
					<text class="text-grey">装修状态</text>
				</view>
				<view class="action">
					<text class="text-grey text-sm">{{info.zx_state}}</text>
				</view>
			</view>
			
			<view class="cu-item">
				<view class="content">
					<text class="cuIcon-circlefill text-grey"></text>
					<text class="text-grey">产权年限</text>
				</view>
				<view class="action">
					<text class="text-grey text-sm">{{info.years}}</text>
				</view>
			</view>
			
			<view class="cu-item">
				<view class="content">
					<text class="cuIcon-circlefill text-grey"></text>
					<text class="text-grey">开发商</text>
				</view>
				<view class="action">
					<text class="text-grey text-sm">{{info.developers}}</text>
				</view>
			</view>
			
			<view class="cu-item">
				<view class="content">
					<text class="cuIcon-circlefill text-grey"></text>
					<text class="text-grey">地址</text>
				</view>
				<view class="action">
					<text class="text-grey text-sm">{{info.address}}</text>
				</view>
			</view>
			
			<view class="cu-item">
				<view class="content">
					<text class="cuIcon-circlefill text-grey"></text>
					<text class="text-grey">售楼地址</text>
				</view>
				<view class="action">
					<text class="text-grey text-sm">{{info.sale_address}}</text>
				</view>
			</view>
			
			<view class="cu-item">
				<view class="content">
					<text class="cuIcon-circlefill text-grey"></text>
					<text class="text-grey">周边环境</text>
				</view>
				<view class="action">
					<text class="text-grey text-sm">{{info.around}}</text>
				</view>
			</view>
			
			<view class="cu-item" @click="call_phone(info.phone)">
				<view class="content">
					<text class="cuIcon-circlefill text-grey"></text>
					<text class="text-grey">咨询电话</text>
				</view>
				<view class="action">
					<text class="text-grey text-sm">{{info.phone}}</text>
				</view>
			</view>
			
			<view class="cu-item">
				<view class="content">
					<text class="cuIcon-circlefill text-grey"></text>
					<text class="text-grey">状态</text>
				</view>
				<view class="action">
					<text class="text-grey text-sm">{{state[info.state]}}</text>
				</view>
			</view>
			
			
			
			<!-- <view class="cu-item" >
				<view class="content">
					<text class="cuIcon-tagfill text-red  margin-right-xs"></text>
					<text class="text-grey">标签</text>
				</view>
				<view class="action">
					<view class="cu-tag round bg-orange" :class="'light-'+k" v-for="(v,k) in info.tags" :key="k">{{v}}</view>
				</view>
			</view> -->
		</view>
		<view class="cu-bar bg-white margin-top">
			<view class="action">
				<text class="cuIcon-titles text-green"></text>
				<text class="text-xl text-bold">详细描述</text>
			</view>
		</view>
		<!-- <view class="description">
			<text class="text-lg">{{info['需求内容']}}</text>
		</view> -->


		<swiper style="margin-top: 3rpx;height: 400rpx !important;" class="card-swiper square-dot" :indicator-dots="true"
			:circular="true" :autoplay="true" interval="5000" duration="500" @change="cardSwiper"
			indicator-color="#8799a3" indicator-active-color="#F8D347">
			<swiper-item :class="cardCur==index?'cur':''">
				<view class="">
					<image :src="img+info.img" mode="aspectFill"></image>
					<!-- 	<image :src="item.url" mode="aspectFill" v-if="item.type=='image'"></image> -->
					<!-- <video :src="item.url" autoplay loop muted :show-play-btn="false" :controls="false" objectFit="cover" v-if="item.type=='video'"></video> -->
				</view>
			</swiper-item>
		</swiper>
		<view style="padding: 20rpx;">
			<rich-text :nodes="info.infor"></rich-text>
		</view>
		

		

		<view style="width: 100%;display: flex;flex-direction: row;flex-wrap: wrap;">
			<view
				style="width: 40%;margin: 5%;height: 12rem;display: flex;flex-direction: column;align-items: center;justify-content: center;"
				v-for="item in infoRecommandlist" @click="recommandItemClick(item)">
				<image :src="item.url" style="flex: 1;"></image>
				<view style="height:2.2rem;display: flex;justify-content: center;align-items: center;">{{item["需求标题"]}}
				</view>
			</view>
		</view>
		<!-- <view class="operate-nav " :style="{opacity:isShowBottomNav?'1':'0'}">
			<view class="operate-left">
				<image mode="widthFix" class="round" src="http://img2.imgtn.bdimg.com/it/u=1039075865,3371165857&fm=26&gp=0.jpg"
				 @tap="hrefCard"></image>
				<view class="username">
					<text>{{info.auth.name}}</text>
				</view>
			</view>
			<view class="operate-right">
				<view class="like">
					<text class="cuIcon-favor text-gray"></text>
					<text>收藏</text>
				</view>
				<view class="concat" @tap="hrefChat">
					<text class="cuIcon-messagefill text-black"></text>
					<text>联系</text>
				</view>
			</view>
		</view> -->
		<view class="seat-height" :style="[{height:footer_bottom+20 + 'px'}]"></view>
		<view class="cu-bar bg-white tabbar border shop store"
			:style="[{height:footer_bottom + 'px',bottom:footer_state + 'px'}]">
			<view class="action">
				

				<view style="display: flex;flex-direction: row;">
					
					<view @click.stop="nav_position()" style="z-index: 999;">
						<image class="cuIcon-post"></image>
						导航
					</view>
					
					<view @click.stop="shareClick()" style="z-index: 999;">
						<image class="cuIcon-share"></image>
						分享
					</view>
					 <view  style="z-index: 999;" @click="nav_home()">
						<image class="cuIcon-home"></image>
						主页
					</view>
				</view>
				<!-- <view class="info" style="background-color: #007AFF;">
				
					<view>
						<text class="text-bold text-lg">{{info['姓名']}}</text>
					</view>
					<view>
						<text class="text-xs text-olive">查看楼主</text>
					</view>
				</view> -->
			</view>

		
			<view style="justify-content: flex-end; margin: 10rpx;">
				<button v-if="info.collection==null" class="cu-btn bg-green round shadow-blur" @tap="collect">收藏</button>
				<button v-else class="cu-btn bg-green round shadow-blur" @tap="collect">取消收藏</button>

			</view>
			<view class="btn-group" style="justify-content: flex-end;margin-left: 10rpx">
				<button class="cu-btn bg-red round shadow-blur" @click.stop="call_phone(info.phone)">电话</button>
			</view>
		</view>
		<!-- 弹框 -->
		<u-popup v-model="atShowShare" mode="bottom" border-radius="30">
			<view class="share-box">
				<u-grid :col="2" :border="false">
					<u-grid-item :border-bottom="false">
						<button class="no-btn" open-type="share">
							<u-icon name="weixin-circle-fill" :size="70" color="#999"></u-icon>
							<view class="grid-text u-margin-top-20">分享好友</view>
						</button>
					</u-grid-item>
					<u-grid-item :border-bottom="false" @click="qrcode()">
						<u-icon name="download" :size="70" color="#999"></u-icon>
						<view class="grid-text u-margin-top-20">生成海报</view>
					</u-grid-item>
				</u-grid>
				<view class="share-cancel" @click="atShowShare = false"><text>取消</text></view>
			</view>
		</u-popup>
		

		<!-- h5小程序点击分享出来的提示图层 -->
		<view v-if="shareMaskVisible" style="position: fixed;top: 0;width: 100%;height: 100%;z-index: 99999;display: flex;align-items: center;;justify-content: center;"
			@click="shareMaskClick">
			<image src="../../static/icon/count.png"
				style="width: 15rem;height: 12rem;z-index: 99;position: fixed;top: 0;right: 1rem;"></image>
				
				<image  :src="shareQRData" style="z-index: 100;width: 12rem;height:12rem;position: absolute"></image>
			<view
				style=";width: 100%;height: 100%;background-color: #000000;opacity: 0.7;position: absolute;top: 0;z-index: 0;">
		
			</view>
				<canvas id="qrcode" canvas-id="qrcode" style="width: 354px;height: 354px;opacity: 0;position: fixed;z-index: -9999999999;" />
<!-- <uqrcode ref="uqrcode" ></uqrcode> -->
		</view>
		 <qrcode-poster v-if="hj_data.title!=''" ref="poster" :title="hj_data.title"
		        :subTitle="hj_data.subTitle" 
		        :headerImg="hj_data.headerImg"
		        :price="hj_data.price"
				:abImg="hj_data.headerImg"
				></qrcode-poster>
	</view>
</template>

<script>
	import c from 'modules/common.js'
	import b from 'modules/bll.js'
	// import uQRCode from @'../uni_modules/'
	import uQRCode from '../../uni_modules/Sansnn-uQRCode/components/uqrcode/common/uqrcode.js'
	import CommonModel from '../../model/common.js'
	import QrcodePoster from '../../components/zhangyu-qrcode-poster/zhangyu-qrcode-poster.vue'
	import UserModel from '../../model/user.js'
	import CollectionModel from '../../model/collection.js'

	export default {
		data() {
			return {
				dataItem: {},
				img:this.$get_img,
				info: {},
				hj_data:{
					title:'',
					subTitle:'',
					headerImg:'',
					price:''
					
				},
				atShowShare:false,
			
				state:['待发布','在售','已售出'],
			};
		},
		components:{
			QrcodePoster
		},
		onShareAppMessage(res) {
		    if (res.from === 'button') {// 来自页面内分享按钮
		      console.log(res.target)
		    }
			let infor=uni.getStorageSync('infor')
			let id=0;
			if(infor){
				id=infor.id
			}
		    return {
		      title: '给你一个分享',
		      path: '/pages/index/index?invite_id='+id
		    }
		  },
		
		onLoad(option) {

			if(option.id){
				this.get_data(option.id)
			}
	

		},
		
		methods: {
			get_data(id){
				CommonModel.get_house_id(id).then(res=>{
					this.info=res.data
				})
			},
			collect(){
				let that=this
				CollectionModel.add(this.info.id).then(res=>{
					that.get_data(this.info.id)
				})
			},
			nav_home(){
				uni.switchTab({
					url:'/pages/index/index'
				})
			},
			qrcode(){	//生成海报
		
				let user=uni.getStorageSync('infor')
				let that=this
				this.hj_data.subTitle=user.nickname+"给你一个分享"
				this.hj_data.headerImg=this.img+this.info.img
				this.hj_data.price=this.info.price
				this.hj_data.title=this.info.name
				UserModel.create_house_qrcode(this.info.id).then(res=>{
					that.atShowShare=false
					that.$refs.poster.showCanvas(that.img+res.data.path)
					
				})
				/* CommonModel.c(this.data.id).then(res=>{
					
				}) */
				
				
			},
			shareClick(){
				this.atShowShare=true
			},
			nav_position(){
				if(this.info.position){
					uni.openLocation({
						latitude: Number(this.info.position[1]) || 0,
						longitude: Number(this.info.position[0]) || 0,
						name: this.info.address
					});
				}
				
			},
			//拨打客服电话
			call_phone(phone)
			{
				uni.makePhoneCall({
				    phoneNumber: phone
				});
			},
		}	
	}
</script>

<style lang="scss" scoped>
	$foot:40rpx;
	
	.share-box {
		display: flex;
		flex-direction: column;
	
		.grid-text {
			font-size: 28rpx;
		}
	
		.share-cancel {
			margin-top: auto;
			text-align: center;
			border-top: 1rpx solid #f8f8f8;
			height: 80rpx;
			font-size: 28rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
	
	.share-fixed {
		position: fixed;
		top: 60rpx;
		left: 50%;
		width: 500rpx;
		height: 700rpx;
		margin-left: -250rpx;
		z-index: 9999999;
	
		.share-image {
			width: 100%;
			height: 100%;
		}
	}

	.storeDetail {
		.store {
			border-top: 1upx solid #EEEEEE;

			.btn-group {
				justify-content: flex-end;
				padding: 0 30upx !important;
			}

			.action {
				flex: 2;
				display: flex;
				justify-content: flex-start;
				padding-left: 10upx;

				.cu-avatar-group {
					padding: 0 10upx;

					.radius {
						border-radius: 10upx !important;
					}
				}

				.info {
					margin-left: 10upx;
					height: 45px;
					display: flex;
					flex-flow: column;
					justify-content: center;

					view:last-child {
						margin-top: 10upx;
						text-align: left;
					}
				}
			}
		}

		.operate-nav {
			position: fixed;
			bottom: 110rpx;
			z-index: 99;
			left: 50%;
			height: 90rpx;
			border-radius: 65rpx;
			display: flex;
			justify-content: flex-start;
			width: 600rpx;
			transition: .8s all;
			background-color: #EEEEEE;
			transform: translateX(-50%);
			box-shadow: 0 0 10rpx 1rpx #EEEEEE;

			.operate-left {
				width: 300rpx;
				display: flex;
				align-items: center;

				image {
					margin: 0 20rpx;
					width: 60rpx;
					height: 60rpx;
				}

				.username {
					flex: 1;
					max-width: 220rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
			}

			.operate-right {
				margin-left: auto;
				height: 100%;
				width: 300rpx;
				display: flex;

				.like {
					flex: 1;
					display: flex;
					justify-content: center;
					align-items: center;
					background-image: linear-gradient(-90deg, #F8D347, #EEEEEE);
				}

				.concat {
					flex: 1;
					display: flex;
					justify-content: center;
					border-top-right-radius: 65rpx;
					border-bottom-right-radius: 65rpx;
					// background-image: linear-gradient(to right , #9B63FF, #462188);
					background-image: linear-gradient(-90deg, #FB7E22, #F8D347);
					align-items: center;
				}
			}
		}

		.delete-thing {
			width: 100vw;
			position: fixed;
			bottom: 40rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.description {
			width: 100vw;
			padding: 15rpx;
		}

		.screen-swiper {
			height: 700rpx;
		}

		.recommend {
			width: 100vw;
			height: 100rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.line {
				border: none;
				width: 20vw;
				height: 1px;
				background-color: #f37b1d;
			}

			.circle {
				width: 5px;
				height: 5px;
				border-radius: 50%;
				background-color: #f37b1d;
			}

			.text-lg {
				padding: 0 15rpx;
			}
		}

		.store-title {
			max-width: 100vw;
			padding: 0rpx 20rpx 20rpx 20rpx;
			display: -webkit-box;
			/*设置为弹性盒子*/
			-webkit-line-clamp: 4;
			/*最多显示1行*/
			overflow: hidden;
			/*超出隐藏*/
			text-overflow: ellipsis;
			/*超出显示为省略号*/
			-webkit-box-orient: vertical;
			word-break: break-all;
			/*强制英文单词自动换行*/
		}

		.store-tag {
			padding: 0rpx 20rpx 20rpx 20rpx;
		}

		.store-price {
			width: 100vw;
			padding: 20rpx 20rpx;
		}

		.help {
			position: fixed;
			background-color: #FFFFFF;
			display: flex;
			justify-content: center;
			align-items: center;
			height: $foot;
			width: 100vw;
			text-align: center;
			bottom: 0;
		}

		.shop {
			width: 100vw;
			position: fixed;
			bottom: $foot;

			.submit {
				max-width: 300rpx;
			}
		}
	}

	.tower-swiper .tower-item {
		transform: scale(calc(0.5 + var(--index) / 10));
		margin-left: calc(var(--left) * 100upx - 150upx);
		z-index: var(--index);
	}
</style>
